<!-- Buttons
================================================== -->
<section id="buttons">
	<div class="row">
        <div class="col-md-12">
		    <table class="table table-bordered table-striped">
		        <thead>
		            <tr>
		                <th>Button</th>
		                <th>Large Button</th>
		                <th>Small Button</th>
		                <th>Disabled Button</th>
		                <th>Button with Icon</th>
		                <th>Split Button</th>
		            </tr>
		        </thead>
		            <tbody>
		                <tr>
		                    <td><a class="btn btn-default" href="" title="Bootstrap 3 themes generator">Default</a></td>
		                    <td><a class="btn btn-default btn-lg" href="" title="Bootstrap 3 themes generator">Default</a></td>
		                    <td><a class="btn btn-default btn-sm" href="" title="Bootstrap 3 themes generator">Default</a></td>
		                    <td><a class="btn btn-default disabled" href="" title="Bootstrap 3 themes generator">Default</a></td>
		                    <td><a class="btn btn-default" href="" title="Bootstrap 3 themes generator">
		                    <span class="glyphicon glyphicon-heart-empty"></span> Default</a></td>
		                    <td>
		                        <div class="btn-group">
		                              <a class="btn btn-default" href="" title="Bootstrap 3 themes generator">Default</a>
		                              <a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="" title="Bootstrap 3 themes generator"><span class="caret"></span></a>
		                              <ul class="dropdown-menu">
		                                <li><a href="" title="Bootstrap 3 themes generator">Action</a></li>
		                                <li><a href="" title="Bootstrap 3 themes generator">Another action</a></li>
		                                <li><a href="" title="Bootstrap 3 themes generator">Something else here</a></li>
		                                <li class="divider"></li>
		                                <li><a href="" title="Bootstrap 3 themes generator">Separated link</a></li>
		                              </ul>
		                        </div><!-- /btn-group -->
		                    </td>
		                </tr>
		                <tr>
		                    <td><a class="btn btn-primary" href="" title="Bootstrap 3 themes generator">Primary</a></td>
		                    <td><a class="btn btn-primary btn-lg" href="" title="Bootstrap 3 themes generator">Primary</a></td>
		                    <td><a class="btn btn-primary btn-sm" href="" title="Bootstrap 3 themes generator">Primary</a></td>
		                    <td><a class="btn btn-primary disabled" href="" title="Bootstrap 3 themes generator">Primary</a></td>
		                    <td><a class="btn btn-primary" href="" title="Bootstrap 3 themes generator"><span class="glyphicon glyphicon-heart-empty"></span> Primary</a></td>
		                    <td>
		                        <div class="btn-group">
		                              <a class="btn btn-primary" href="" title="Bootstrap 3 themes generator">Primary</a>
		                              <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="" title="Bootstrap 3 themes generator"><span class="caret"></span></a>
		                              <ul class="dropdown-menu">
		                                <li><a href="" title="Bootstrap 3 themes generator">Action</a></li>
		                                <li><a href="" title="Bootstrap 3 themes generator">Another action</a></li>
		                                <li><a href="" title="Bootstrap 3 themes generator">Something else here</a></li>
		                                <li class="divider"></li>
		                                <li><a href="" title="Bootstrap 3 themes generator">Separated link</a></li>
		                              </ul>
		                        </div><!-- /btn-group -->
		                    </td>
		                </tr>
		                <tr>
		                    <td><a class="btn btn-info" href="" title="Bootstrap 3 themes generator">Info</a></td>
		                    <td><a class="btn btn-info btn-lg" href="" title="Bootstrap 3 themes generator">Info</a></td>
		                    <td><a class="btn btn-info btn-sm" href="" title="Bootstrap 3 themes generator">Info</a></td>
		                    <td><a class="btn btn-info disabled" href="" title="Bootstrap 3 themes generator">Info</a></td>
		                    <td><a class="btn btn-info" href="" title="Bootstrap 3 themes generator"><span class="glyphicon glyphicon-heart-empty"></span> Info</a></td>
		                    <td>
		                        <div class="btn-group">
		                              <a class="btn btn-info" href="" title="Bootstrap 3 themes generator">Info</a>
		                              <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="" title="Bootstrap 3 themes generator"><span class="caret"></span></a>
		                              <ul class="dropdown-menu">
		                                <li><a href="" title="Bootstrap 3 themes generator">Action</a></li>
		                                <li><a href="" title="Bootstrap 3 themes generator">Another action</a></li>
		                                <li><a href="" title="Bootstrap 3 themes generator">Something else here</a></li>
		                                <li class="divider"></li>
		                                <li><a href="" title="Bootstrap 3 themes generator">Separated link</a></li>
		                              </ul>
		                        </div><!-- /btn-group -->
		                    </td>
		                </tr>
		                <tr>
		                    <td><a class="btn btn-success" href="" title="Bootstrap 3 themes generator">Success</a></td>
		                    <td><a class="btn btn-success btn-lg" href="" title="Bootstrap 3 themes generator">Success</a></td>
		                    <td><a class="btn btn-success btn-sm" href="" title="Bootstrap 3 themes generator">Success</a></td>
		                    <td><a class="btn btn-success disabled" href="" title="Bootstrap 3 themes generator">Success</a></td>
		                    <td><a class="btn btn-success" href="" title="Bootstrap 3 themes generator"><span class="glyphicon glyphicon-heart-empty"></span> Success</a></td>
		                    <td>
		                        <div class="btn-group">
		                              <a class="btn btn-success" href="" title="Bootstrap 3 themes generator">Success</a>
		                              <a class="btn btn-success dropdown-toggle" data-toggle="dropdown" href="" title="Bootstrap 3 themes generator"><span class="caret"></span></a>
		                              <ul class="dropdown-menu">
		                                <li><a href="" title="Bootstrap 3 themes generator">Action</a></li>
		                                <li><a href="" title="Bootstrap 3 themes generator">Another action</a></li>
		                                <li><a href="" title="Bootstrap 3 themes generator">Something else here</a></li>
		                                <li class="divider"></li>
		                                <li><a href="" title="Bootstrap 3 themes generator">Separated link</a></li>
		                              </ul>
		                        </div><!-- /btn-group -->
		                    </td>
		                </tr>
		                <tr>
		                    <td><a class="btn btn-warning" href="" title="Bootstrap 3 themes generator">Warning</a></td>
		                    <td><a class="btn btn-warning btn-lg" href="" title="Bootstrap 3 themes generator">Warning</a></td>
		                    <td><a class="btn btn-warning btn-sm" href="" title="Bootstrap 3 themes generator">Warning</a></td>
		                    <td><a class="btn btn-warning disabled" href="" title="Bootstrap 3 themes generator">Warning</a></td>
		                    <td><a class="btn btn-warning" href="" title="Bootstrap 3 themes generator"><span class="glyphicon glyphicon-heart-empty"></span> Warning</a></td>
		                    <td>
		                        <div class="btn-group">
		                              <a class="btn btn-warning" href="" title="Bootstrap 3 themes generator">Warning</a>
		                              <a class="btn btn-warning dropdown-toggle" data-toggle="dropdown" href="" title="Bootstrap 3 themes generator"><span class="caret"></span></a>
		                              <ul class="dropdown-menu">
		                                <li><a href="" title="Bootstrap 3 themes generator">Action</a></li>
		                                <li><a href="" title="Bootstrap 3 themes generator">Another action</a></li>
		                                <li><a href="" title="Bootstrap 3 themes generator">Something else here</a></li>
		                                <li class="divider"></li>
		                                <li><a href="" title="Bootstrap 3 themes generator">Separated link</a></li>
		                              </ul>
		                        </div><!-- /btn-group -->
		                    </td>
		                </tr>
		                <tr>
		                    <td><a class="btn btn-danger" href="" title="Bootstrap 3 themes generator">Danger</a></td>
		                    <td><a class="btn btn-danger btn-lg" href="" title="Bootstrap 3 themes generator">Danger</a></td>
		                    <td><a class="btn btn-danger btn-sm" href="" title="Bootstrap 3 themes generator">Danger</a></td>
		                    <td><a class="btn btn-danger disabled" href="" title="Bootstrap 3 themes generator">Danger</a></td>
		                    <td><a class="btn btn-danger" href="" title="Bootstrap 3 themes generator"><span class="glyphicon glyphicon-heart-empty"></span> Danger</a></td>
		                    <td>
		                        <div class="btn-group">
		                              <a class="btn btn-danger" href="" title="Bootstrap 3 themes generator">Danger</a>
		                              <a class="btn btn-danger dropdown-toggle" data-toggle="dropdown" href="" title="Bootstrap 3 themes generator"><span class="caret"></span></a>
		                              <ul class="dropdown-menu">
		                                <li><a href="" title="Bootstrap 3 themes generator">Action</a></li>
		                                <li><a href="" title="Bootstrap 3 themes generator">Another action</a></li>
		                                <li><a href="" title="Bootstrap 3 themes generator">Something else here</a></li>
		                                <li class="divider"></li>
		                                <li><a href="" title="Bootstrap 3 themes generator">Separated link</a></li>
		                              </ul>
		                        </div><!-- /btn-group -->
		                    </td>
		                </tr>
		                
		            </tbody>
		    </table>
		   
		   	<h4>Button groups</h4>
			<div class="btn-toolbar">
				<div class="btn-group">
					<a href="" title="Bootstrap 3 themes generator" class="btn btn-default btn-sm">1</a>
					<a href="" title="Bootstrap 3 themes generator" class="btn btn-default btn-sm">2</a>
					<a href="" title="Bootstrap 3 themes generator" class="btn btn-default btn-sm">3</a>
				</div>
				
				<div class="btn-group">
					<a href="" title="Bootstrap 3 themes generator" class="btn btn-default btn-sm">5</a>
					<a href="" title="Bootstrap 3 themes generator" class="btn btn-default btn-sm">6</a>
					<a href="" title="Bootstrap 3 themes generator" class="btn btn-default btn-sm">7</a>
				</div>
				
				<div class="btn-group">
					<a href="" title="Bootstrap 3 themes generator" class="btn btn-default btn-sm">8</a>
				</div>
			</div>
			<hr />
			<div class="btn-toolbar">
				<div class="btn-group">
					<a href="" title="Bootstrap 3 themes generator" class="btn btn-default">1</a>
					<a href="" title="Bootstrap 3 themes generator" class="btn btn-default">2</a>
					<a href="" title="Bootstrap 3 themes generator" class="btn btn-default">3</a>
				</div>
				
				<div class="btn-group">
					<a href="" title="Bootstrap 3 themes generator" class="btn btn-default">5</a>
					<a href="" title="Bootstrap 3 themes generator" class="btn btn-default">6</a>
					<a href="" title="Bootstrap 3 themes generator" class="btn btn-default">7</a>
				</div>
				
				<div class="btn-group">
					<a href="" title="Bootstrap 3 themes generator" class="btn btn-default">8</a>
				</div>
			</div>
			<hr />
			<div class="btn-toolbar">
				<div class="btn-group">
					<a href="" title="Bootstrap 3 themes generator" class="btn btn-default btn-lg">1</a>
					<a href="" title="Bootstrap 3 themes generator" class="btn btn-default btn-lg">2</a>
					<a href="" title="Bootstrap 3 themes generator" class="btn btn-default btn-lg">3</a>
				</div>
				
				<div class="btn-group">
					<a href="" title="Bootstrap 3 themes generator" class="btn btn-default btn-lg">5</a>
					<a href="" title="Bootstrap 3 themes generator" class="btn btn-default btn-lg">6</a>
					<a href="" title="Bootstrap 3 themes generator" class="btn btn-default btn-lg">7</a>
				</div>
				
				<div class="btn-group">
					<a href="" title="Bootstrap 3 themes generator" class="btn btn-default btn-lg">8</a>
				</div>
			</div>	    
		    
		    <div class="row">
		    	<div class="col-md-6">
		    		<h4>Nesting</h4>
				    <div class="btn-group">
					  <button type="button" class="btn btn-default">1</button>
					  <button type="button" class="btn btn-default">2</button>

					  <div class="btn-group">
					    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
					      Dropdown
					      <span class="caret"></span>
					    </button>
					    <ul class="dropdown-menu">
					      <li><a href="#">Dropdown link</a></li>
					      <li><a href="#">Dropdown link</a></li>
					    </ul>
					  </div>
					</div>
		    	</div>
		    	<div class="col-md-6">
		    		<h4>Vertical variation</h4>
					<div class="btn-group-vertical">
					 	<a href="" title="Bootstrap 3 themes generator" class="btn btn-default">Home</a>
						<a href="" title="Bootstrap 3 themes generator" class="btn btn-default">About</a>
						<a href="" title="Bootstrap 3 themes generator" class="btn btn-default">Contact</a>
					</div>
		    	</div>
		    </div>
		    
		    <h4>Justified link variation</h4>
				<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
				<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
							

			<h4>Justified link variation</h4>
			<div class="btn-group btn-group-justified">
				<a href="" title="Bootstrap 3 themes generator" class="btn btn-default">Home</a>
				<a href="" title="Bootstrap 3 themes generator" class="btn btn-default">About</a>
				<a href="" title="Bootstrap 3 themes generator" class="btn btn-default">Contact</a>
			</div>
        </div>
    </div>

</section>
<hr>
<section class="row">
	<div class="col-md-12">
		<div class="bs-example">
			<div class="modal">
		        <div class="modal-dialog">
		          <div class="modal-content">
		            <div class="modal-header">
		              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
		              <h4 class="modal-title">Modal title</h4>
		            </div>
		            <div class="modal-body">
		              <p>One fine body…</p>
		            </div>
		            <div class="modal-footer">
		              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
		              <button type="button" class="btn btn-primary">Save changes</button>
		            </div>
		          </div><!-- /.modal-content -->
		        </div><!-- /.modal-dialog -->
		      </div>
		</div>
	</div>
</section>
 